import styled from 'styled-components'

import bcg from '@/assets/img/banner_sprite.png'
export const Wrap = styled.div`
    background:url(${props => props.bgImg}) center center/6000px;
    height:285px;
    width:100%;
    .center{
        width:982px;
        height:100%;
        margin:0 auto;
        position: relative;
        .jump{
            position:absolute;
            top:111px;
            width:37px;
            height:63px;
            background:url(${bcg})
        }
        .jump:first-of-type{
            color:red;
            left:-68px;
            background-position: 0 -360px;
            &:hover{
                background-position:0 -430px;
            }
        }
        .jump:last-of-type{
            color:blue;
            right:-68px;
            background-position: 0 -508px;
            &:hover{
                background-position:0 -578px;
            }
        }
        .left, .right{
            height:100%;
            float:left;
        }    
        .left{
            width:730px;
            .img{
                width:100%;
                height:285px;
            }
            .slick-slide{
                /* transition: opacity 800ms ease 0s, visibility 800ms ease 0s !important; */
            }
            .slick-dots-bottom{
                bottom:4px;
            }
            .slick-dots {
                li{
                    width:20px;
                    height:20px;
                    border-radius:50%;
                    margin:0;
                    button{
                        box-sizing:border-box;
                        overflow:hidden;
                        width:20px;
                        height:20px;
                        border-radius:50%;
                        border:6.5px solid rgba(0,0,0,0) !important;
                        background:rgba(255,255,255,.3);
                        background-clip: padding-box;
                        opacity:1;
                    }
                    &.slick-active{
                        button{
                        background:#cc1212;
                        background-clip: padding-box;
                        opacity:1;
                        }
                    }
                }
            }
        }
        .right{
            width:252px;
            background:url('https://s2.music.126.net/style/web2/img/index/download.png?9170b23449d60d9682711f710425deb9') no-repeat 0 0;
            a{
                display: block;
                width: 215px;
                height: 56px;
                margin: 186px 0 0 19px;
                background-position: 0 9999px;
                text-indent: -9999px;
            }
            p{
                margin: 10px auto;
                text-align: center;
                color: #8d8d8d;
            }
        }
    }
 `